<template>
    <div class="refund-goods" :style='{height:clientHeight+"rem"}'>
        <empty-notice v-if="realData.length == 0"></empty-notice>
        <div class="order-card">
            <div class="card-detail" v-for="(item,index) in realData" :key="index">
                <div class="order-num">
                    <div class="num">
                        <span>订单编号: </span>
                        <span>{{item['order_num']}}</span>
                    </div>
                    <div class="stantard">
                        <span>{{item['order_status']}}</span>
                    </div>
                </div>
                <div class="order-product-all">
                    <div class="product-img">
                        <img :src="item['image_url']" alt="">
                    </div>
                    <div class="product-msg">
                        <p>{{item.name}}</p>
                        <p>{{item.des}}</p>
                        <div class="product-price">
                            <span>￥{{item.price}}</span>
                            <span>x</span>
                            <span>{{item['order_num']}}</span>
                        </div>
                    </div>
                </div>
                <div class="order-stantard">
                    <span>{{item['order_status']}}</span>
                    <span>￥{{item.price*item['order_num']}}</span>
                </div>
                <!-- <div class="order-btns">
                    <div class="order-btn" v-if="item['order_status'] == '未付款'">
                        <span>取消订单</span>
                    </div>
                    <div class="order-btn" v-if="item['order_status'] == '未付款'" @click="toPay">
                        <span>去付款</span>
                    </div>
                    <div class="order-btn" v-if="item['order_status'] == '已付款'">
                        <span>提醒发货</span>
                    </div>
                    <div class="order-btn" v-if="item['order_status'] == '交易完成'">
                        <span>申请退换</span>
                    </div>
                    <div class="order-btn" v-if="item['order_status'] == '已发货'">
                        <span>查看物流</span>
                    </div>
                    <div class="order-btn" v-if="item['order_status'] == '已发货'">
                        <span>确认收货</span>
                    </div>
                    <div class="order-btn" v-if="item['order_status'] == '交易完成'" @click="toComment">
                        <span>商品评价</span>
                    </div>
                </div> -->
            </div>
        </div>
    </div>
</template>

<script>
import virtualData from './virtual'
import orderCards from './orderCards'
import emptyNotice from './emptyNotice'

export default {
    name:'refundGoods',
    data(){
        return {
            virtual:null,
            refund:'refund',
            realData:[],
            clientHeight:0
        }
    },
    methods:{
        getRefund(){
            let that = this;
            let token = localStorage.getItem('token');
            that.$ajax(that, 'get', that.$api.orderStatus+4, null, token, function(res){
                if(res.data['error_code'] == 0){
                    that.realData = res.data['msg'];
                    that.transferUrl(that.realData);
                    that.transferStatus(that.realData);
                    console.log(that.realData);
                }
            })
        }
    },
    mounted(){
        let scale = window.devicePixelRatio;
        let clientHeight = document.documentElement.clientHeight;
        this.clientHeight = clientHeight*scale/100;
        this.$store.state.tab = '退换货';
        this.getRefund();
    },
    activated(){
        this.$store.state.tab = '退换货';
        this.getRefund();
    },
    components:{
        orderCards,
        emptyNotice
    }
}
</script>

<style lang='less'>
@rem:100rem;

.refund-goods{
    width: 100%;
    margin-top: 90/@rem;
    margin-bottom: 10/@rem;
    .order-card{
        width: 100%;
        padding-bottom: 30/@rem;
        .card-detail{
            background: #ffffff;
            margin-top: 20/@rem;
            .order-num{
                width: 100%;
                box-sizing: border-box;
                padding: 0 20/@rem;
                height: 82/@rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px solid #f0f0f0;
            }
            .order-product-all{
                width: 710/@rem;
                height: 242/@rem;
                margin: 0 auto;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #f0f0f0;
                .product-img{
                    width: 168/@rem;
                    height: 168/@rem;
                    img{
                        width: 168/@rem;
                        height: 168/@rem;
                    }
                }
                .product-msg{
                    text-align: start;
                    margin-left: 30/@rem;
                    p:nth-of-type(1){
                        width: 100%;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }
                    p:nth-of-type(2){
                        font-size: 24/@rem;
                        color: #868686;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        margin-top: 24/@rem;
                    }
                    .product-price{
                        margin-top: 36/@rem;
                        span{
                            font-size: 28/@rem;
                        }
                        span:nth-of-type(2){
                            color: #868686;
                        }
                    }
                }
            }
            .order-stantard{
                width: 100%;
                box-sizing: border-box;
                padding: 0 20/@rem;
                margin-top: 20/@rem;
                display: flex;
                justify-content: space-between;
                span:nth-of-type(1){
                    color: #868686;
                }
                span:nth-of-type(2){
                    font-size: 28/@rem;
                    color: #fd4141;
                }
            }
            .order-btns{
                width: 100%;
                box-sizing: border-box;
                padding: 0 20/@rem;
                display: flex;
                justify-content: flex-end;
                margin-top: 54/@rem;
                padding-bottom: 20/@rem;
                .order-btn{
                    width: 170/@rem;
                    height: 60/@rem;
                    line-height: 60/@rem;
                    border-radius: 6/@rem;
                    border: 2/@rem solid #e7e7e7;
                }
                .order-btn:active{
                    background: #ededed;
                }
                .order-btn{
                    margin:0 10/@rem;
                }
            }
        }
    }
}
</style>
